<template>
	<view class="details">
		<xbd-pages-content :title="title">
			<template #content>
				<view class="content" :style="'minHeight:'+windowHeight+'px'">
					<view class="pictureBox">
						<view class="QrCode"  v-for="(item,index) in fromDate.qrcode" :key="index">
							<view class="" style=" height: 60rpx; margin-bottom: 50rpx; font-size: 32rpx; display: flex; justify-content: space-between;"> 
								<view>{{item.name + (index+1)}}</view>
								<view v-if="requer.ticket_type !== '0'">餐券金额{{item.average}}元/人</view>
							</view>
							<view class="line">
								
							</view>
							<view class="QrCode_box">
								<image  class="img" :src="`data:image/png;base64,${item.picture}`" mode=""></image>
							</view>
							<view class="line">
								
							</view>
							<view class="Qr_foot">
								<view class="Qr_tag">
									有效期：
								</view>
								<view class="Qr_type">
									{{item.start_time}} 至 {{item.end_time}}
								</view>
							</view>
							<view class="Qr_foot" v-if="requer.ticket_type !== '2'">
								<view class="Qr_tag">
									使用时间：
								</view>
								<view class="Qr_type">
									{{item.time}}
								</view>
								
							</view>
							<view v-else class="Qr_foot" >
								<view class="Qr_tag">
									就餐人数：
								</view>
								<view class="Qr_type">
									{{item.person_count}}
								</view>
								
							</view>
						</view>
					</view>
					
				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	// import { mapState } from 'vuex';
	import {
		Meal
	} from '@/api/index.js';
	export default {
		data() {

			return {
				windowHeight:0,
				id:'',
				title:'',
				fromDate: {
				},
				requer:{
					id:'',
					ticket_type:'0',
					type:'usable'
				},
			}
		},
		methods: {
			// 初始化表单
			async init() {
				try {
					this.$showLoading('加载中');
					const res = await Meal.getDetails(this.requer);
					console.log(res)
					uni.hideLoading();
					this.fromDate = res.data.data;
					console.log('data',res.data)
				} catch (e) {
					uni.hideLoading();
					console.log(e);
				}
			},
			
			
		},
		computed: {
		},
		async onLoad(res){
			console.log(res)
			this.requer.ticket_type = res.msg
			this.id = res.id
			this.requer.id = res.id
			await this.init()
			uni.getSystemInfo({
				     success:(res2) =>{
						 this.windowHeight = res2.windowHeight
				         console.log(this.windowHeight);
				     }
				 });
			if(res.msg === '0' ){
				this.title = '普通用餐餐券'
			}else if(res.msg === '1'){
				this.title = '自助用餐餐券'
			}else if(res.msg === '2'){
				this.title = '桌餐用餐餐券'
			}
			uni.setNavigationBarTitle({
			    title: this.title
			});
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .draft:after {
		border: none;
	}

	.content {
		box-sizing: border-box;
		padding: 0 40rpx;
		font-size: 32rpx;
		background-color: #FFFFFF;
		.content_type{
			padding: 40rpx 0;
		}
		.box {
			position: relative;
			display: flex;
			justify-content: space-between;
			margin-bottom: 30px;

			.box_right {
				font-size: 28rpx;
				width: 420rpx;
				
				display: flex;
				justify-content: space-between;
					
				.reason{
					width: 420rpx;
					text-align: left;
					word-wrap: break-word;
				}
				
			}

			.money {
				width: 420rpx;
				font-size: 28rpx;

				.tag {
					color: #999999;
					margin-left: 20rpx;
				}
			}

			.date {
				box-sizing: border-box;
				// padding-right: 100rpx;
			}

			.icon {
				position: absolute;
				top: -10px;
				right: 0;

				image {
					width: 150rpx;
					height: 150rpx;
				}

			}
		}

		.number {
			font-size: 28rpx;
			color: #999999;
			margin-bottom: 30px;

		}

		.tag {
			font-size: 28rpx;
			color: #999999;
		}

		.line {
			border-bottom: 1px solid #eaeaea;
			margin-bottom: 15px;
		}

		.title {
			font-size: 32rpx;
			color: #194769;
			font-weight: 900;
			margin-bottom: 20px;
		}
		.flow {
			.type:last-child {
				.line2 {
					height: 0 !important;
				}
			}
		}

		.type {
			position: relative;
			display: flex;

			.radio {
				width: 20rpx;
				height: 20rpx;
				background-color: #FAC52A;
				border-radius: 10rpx;
			}

			.line2 {
				width: 2rpx;
				height: 100rpx;
				background-color: #FAC52A;
				margin-left: 9rpx;
			}

			.msg {
				.reason {
					margin-top: 20px;
					margin-left: 20rpx;
					color: #999999;
				}
			}

			.msg_box {
				display: flex;
				justify-content: space-between;
				position: absolute;
				width: 610rpx;
				top: -5px;
				left: 40rpx;
				display: flex;
				color: #999999;

				.msg_tag {
					display: flex;

					.name {
						margin-right: 20rpx;
						

						.people {
							font-size: 30rpx;
							color: #194769;
						}
						
					}

					.no {
						color: #FF7543;
					}

					.yes {
						color: #39D4D1;
					}

				}

				.date {
					font-size: 28rpx;
						
					.date_text{
						margin-left: 20rpx;
					}
				}
			}

		}

		.foot {
			box-sizing: border-box;
			padding: 20upx 4upx;
			margin-bottom: 20px;
			margin-top: 30px;

			.btns {
				display: flex;
				justify-content: space-between;

				button {
					width: 300rpx;
					height: 30px;
					line-height: 30px;
					font-size: 32rpx;
					box-sizing: border-box;
				}

				.draft {
					color: #FFFFFF;
					margin-right: 50rpx;
					background:url(../../../static/images/meal/gary.png) no-repeat;
					background-size: 100% 100%;
				}

				.upload {
					background: url(../../../static/images/common/bluebg.png) no-repeat;
					background-size: 100% 100%;
					color: $uni-text-color-inverse;
				}

				.revocation {
					background: url(../../../static/images/common/bluebg.png) no-repeat;
					background-size: 100% 100%;
					color: $uni-text-color-inverse;
					margin-left: 180rpx;
				}
			}
		}
			
		.pictureBox{
			width: 750rpx;
			padding: 30px 40rpx;
			box-sizing: border-box;
			margin-left: -40rpx;
			background-color: #F8F8F8;
		}
		.QrCode{
			box-sizing: border-box;
			border: 2rpx solid #BBBBBB;
			padding: 40rpx 30rpx;
			background-color: #FFFFFF;
			margin-bottom: 60rpx;
			.QrCode_box{
				display: flex;
				flex-direction: column;
				margin-top: 60rpx;
				margin-bottom: 60rpx;
				.img{
					margin-left: 106rpx;
					width: 420rpx;
					height: 420rpx;
				}
			}
			
			.Qr_foot{
				display: flex;
				margin-top: 30rpx;
				font-size: 28rpx;
				.Qr_tag{
					width: 200rpx;
					text-align: right;
					margin-right: 40rpx;
					color: #194769;
				}
				.Qr_type{
					width: 460rpx;
					
				}
			}
		}
	}
	.draft_reason{
		position: relative;
		.textarea{
			box-sizing: border-box;
			margin:10px 30rpx 10px 30rpx;
			width: 440rpx;
			text-align: left;
			font-size: 28rpx;
		}
		.mit{
			position: absolute;
			bottom: 6px;
			right: 40rpx;
			font-size: 28rpx;
			color: #999999;
		}
	}

</style>
